<blc_admin:admin_field_builder fieldBuilder="${field.fieldBuilder}" ceilingEntity="${currentAdminSection.ceilingEntity}">

    <!--/*
    The BLC Rule Builder has several different UI states in which it can be rendered:
    For example, you may wish to display a specific builder differently based on its position on the page.
    This component will render and respond to the "displayType" attribute on the field:
        - "NORMAL" : normal display of the builder
        - "RADIO"  : should this builder be invoked by radio buttons (yes/no)
        - "MODAL"  : should this builder be invoked via a modal
    If the "displayType" is not present, it will just render the RULE_SIMPLE or RULE_WITH_QUANTITY as "NORMAL".
    */-->

    <div class="field-label inline" th:if="${field.displayType != null
    AND (field.displayType == 'RADIO' OR field.displayType == 'MODAL')}">
        <label>
            <span th:text="#{${field.friendlyName + '_Question'}}"></span>
        </label>
    </div>

    <!--/* For: "RADIO" display type */-->
    <div class="custom-checkbox rule-builder-checkbox radio-container"
         th:if="${field.displayType != null
            AND field.displayType == 'RADIO'}">

        <input type="radio"
               th:name="${field.name}"
               th:id="${field.name + '-true'}"
               th:class="${field.ruleType == 'rule-builder-simple' ? 'radio add-main-rule' : 'radio add-main-item-rule'}"
               th:attr="data-ruletype=${field.ruleType}"
               th:checked="${!#arrays.isEmpty(field.dataWrapper.data) or field.dataWrapper.error != null}" />
        <label th:for="${field.name + '-true'}" class="radio-label">
            <span style="margin-right: 10px;" th:text="#{Yes}"></span>
        </label>

        <input type="radio" class="radio clear-rules"
               th:name="${field.name}"
               th:id="${field.name + '-false'}"
               th:checked="${#arrays.isEmpty(field.dataWrapper.data) and field.dataWrapper.error == null }" />
        <label th:for="${field.name + '-false'}" class="radio-label">
            <span style="margin-right: 10px;" th:text="#{No}"></span>
        </label>
    </div>
 
    <div class="rule-builder-container"
         th:classappend="${field.ruleType}"
         th:style="${((#arrays.isEmpty(field.dataWrapper.data) AND field.displayType == 'RADIO')) ? 'display: none;' : ''}">

        <input type="hidden"
               th:id="${field.jsonFieldName}"
               th:name="'fields[\&#39;'+${field.jsonFieldName}+'\&#39;].value'"
               th:value="${field.json}"/>

        <div class="rule-builder-required-field"
            th:attr="data-ruletype=${field.ruleType},
                     data-modal=${field.displayType != null AND field.displayType == 'MODAL'}"></div>

        <!--/* For: "MODAL" display type */-->
        <div class="rule-modal-zone">
            <div th:id="${field.jsonFieldName + '-readable'}"
                 th:if="${field.displayType != null AND field.displayType == 'MODAL'}"
                 class="read-only-rule">
                <span class="readable-no-rule">
                    No rules applied yet, add some
                </span>
            </div>

            <div class="launch-modal-rule-builder"
                 th:if="${field.displayType != null AND field.displayType == 'MODAL'}"
                 th:attr="data-hiddenId=${field.jsonFieldName},
                         data-ruleType=${field.ruleType},
                         data-ruleTitleId=${field.name + '-header'}">
                <i class="fa fa-pencil"></i>
                <!--<span>Edit Rule</span>-->
            </div>

            <div class="clear-rule-builder"
                 th:if="${field.displayType != null AND field.displayType == 'MODAL'}"
                 th:attr="data-hiddenId=${field.jsonFieldName},
                         data-ruleType=${(field.ruleType == 'rule-builder-simple') ? 'add-main-rule' : 'add-main-item-rule'},
                         data-ruleTitleId=${field.name + '-header'}">
                <i class="fa fa-times"></i>
                <!--<span>Clear Rule</span>-->
            </div>
        </div>

        
        <!--/* For: All display types */-->
        <h4 th:id="${field.name + '-header'}" class="field-label"
            th:classappend="${!field.required ? 'query-builder-rules-header' : 'query-builder-rules-header required'}"
            th:style="${((#arrays.isEmpty(field.dataWrapper.data) AND field.displayType == 'RADIO') OR field.displayType == 'MODAL') ? 'display: none;' : ''}">
            <span th:text="#{${field.friendlyName}}"></span>
            <span th:replace="components/fieldTooltip"></span>
        </h4>

        <div class="query-builder-rules-container"
            th:classappend="${(field.required ? 'required-query-builder' : '')
                              + (field.dataWrapper.error != null ? ' rule-data-error' : '')}"
            th:style="${(field.displayType == 'MODAL') ? 'display: none;' : ''}"
            th:id="${field.name}"
            th:attr="data-itemsthatsatisfytext=${#messages.msgOrNull(field.fieldBuilder + '_ItemsThatSatisfyText')}"></div>
        
        <!--/* For: All display types - rule parsing errors */-->
        <div class="field-label error"
            th:if="${field.dataWrapper.error != null}"
            th:style="${field.dataWrapper.error == null ? 'display: none;' : ''}"
            th:inline="text">
            [[#{'ruleErrorTitle'}]] [[${field.dataWrapper.error}]]
            <a href="#" class="button rule-reset right" th:inline="text">[[#{Reset_Rule}]] <i class="icon-undo"></i></a>
        </div>

        <div class="query-builder-rules-container-mvel"
            th:if="${field.dataWrapper.error != null}"
            th:classappend="${field.required ? 'required-query-builder' : ''}"
            th:style="${field.dataWrapper.error == null ? 'display: none;' : ''}">
                <textarea disabled="disabled" th:text="${field.dataWrapper.rawMvel}"></textarea>
        </div>

        <!--/* For: All display types - raw data needed to construct the query builder */-->
        <div class="rule-builder-data" 
            th:attr="data-hiddenid=${field.jsonFieldName},
                     data-containerid=${field.name},
                     data-fields=${fieldWrapper.serialize()},
                     data-data=${field.dataWrapper.serialize()},
                     data-modal=${field.displayType != null AND field.displayType == 'MODAL'},
                     data-ruletype=${field.ruleType}"></div>
    
    </div>

    <span class="error" th:errors="*{fields['__${field.name}__'].value}"></span>
</blc_admin:admin_field_builder>